<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Yeffect-test-case</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css">
    <script src="../../script/libs/jquery-1.9.1.min.js"></script>
    <script>
        var res = ['vProductPictures'];
        var html = [];
        var timestamp = Date.parse(new Date());
        for(s in res){
            html.push('<script type="text/javascript" src="../../script/componets/'+res[s]+'.js?v='+timestamp+'"><\/script>');
        }
        document.write(html.join(''));
    </script>
    <style>
    .ProductContent {
        width: 400px;
        height: 322px;
        position: relative;
    }

    .Productul {
        position: relative;
        overflow: hidden;
        width: 62px;
        height: 263px;
        float: right;
        top: 30px;
    }

    .Productul ul {
        width: 62px;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .Productul ul li {
        width: 60px;
        height: 60px;
        border: 1px solid #aaa;
        margin-bottom: 5px;
        overflow: hidden;
        cursor: pointer;
        background: #000;
    }

    .Productul ul li img {
        width: 60px;
        height: 60px;
        opacity: 0.7;
        transition: opacity 0.3s linear;
        -webkit-transition: opacity 0.3s linear;
    }

    .Productul ul li.current {
        border-color: #FDA10A;
    }

    .Productul ul li.current img {
        opacity: 1;
    }

    .ProductMain {
        width: 320px;
        height: 320px;
        border: 1px solid #aaa;
        float: left;
    }

    .ProductMain img {
        width: 100%;
        height: 100%;
    }

    .upArrow {
        width: 60px;
        height: 22px;
        border: 1px solid #aaa;
        line-height: 22px;
        position: absolute;
        top: 0px;
        right: 0px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
        background: #ddd;
    }

    .upArrow:hover {
        background: #eee;
    }

    .downArrow {
        width: 60px;
        height: 22px;
        border: 1px solid #aaa;
        line-height: 22px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
        background: #ddd;
    }

    .downArrow:hover {
        background: #eee;
    }
    </style>
    <body>
        <div class="ProductContent">
            <div class="ProductMain">
                <img src="http://lorempixel.com/320/320/">
            </div>
            <div class="Productul">
                <ul>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                    <li><img src="http://lorempixel.com/60/60/"></li>
                </ul>
            </div>
            <div class="upArrow">∧</div>
            <div class="downArrow">∨</div>
        </div>
    <script type="text/javascript">
        $(function(){
            /**
            * 1. 缩略图列表的父级容器名称指向 如：".Productul ul";
            * 2. 缩略图列表元素名称指向 如：".Productul ul li";
            * 3. 缩略图能同时完整显示的数量;
            * 4. 缩略图列表单项实际占用宽度减去width的值(包括左右margin值上下padding值上下border上下值之和);
            * 5. 主图的容器名称指向; 如：".ProductMain";
            * 6. 缩略图当前样式 默认"current";(选填)
            * 7. 向上箭头名称指向 默认"";(选填)
            * 8. 向下箭头名称指向 默认"";(选填)
            * 9. 缓动函数名 默认"linear";(选填)
            */
             Yeffect.vProductPictures(".Productul ul",".Productul ul li",4,7,".ProductMain","current",".upArrow",".downArrow","easeInOutCubic");
        })
    </script>
    </body>
</html>
